<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>tui box</title>
</head>
<body>
	<div id="MAP">
	</div>
    
    <div id="control">
    <table id="ctltable">
    <tbody><tr>
    <td></td>
    <td onclick="goUp()">↑</td>
    <td></td>
    </tr>
	<tr>
	<td onclick="goLeft()">←</td>
	<td></td>
	<td onclick="goRight()">→</td>
	</tr>
	<tr>
	<td></td>
	<td onclick="goDown()">↓</td>
	<td></td>
	</tr>
   	</tbody>
   	</table>
   	<input type="file" id="ff">
    </div>
    <script>
	var MAP = document.getElementById("MAP")
	var map = [["#","#","#","#","#"],
			   ["#"," ","P"," ","#"],
			   ["#"," ","X"," ","#"],
			   ["#","O","X"," ","#"],
			   ["#"," "," "," ","#"],
			   ["#","#","#","#","#"]];
	var player = null
	var targets = []

	document.onkeydown = function(e){
		const key = e.key
		switch(key){
			case "w" : goUp();break;
			case "s" : goDown();break;
			case "d" : goRight();break;
			case "a" : goLeft();break;
			case "r" : replay();break;
		}
	}

	function replay(){
		map = JSON.parse(localStorage.getItem("map"))
		loadMap()
		log("--replay--")
	}
	function goUp(){
		const row = player[0]
		const col = player[1]

		
		if(row-1>=0){
			r = row - 1
		}else{
			r = 0
		}

		if(map[r][col] == " " || map[r][col] == "O"){
			setBox(row,col," ")
			setBox(r,col,"P")
		}
		
		if(map[r][col] == "X"){
			if(map[r-1][col]==" " || map[r-1][col] == "O"){
				setBox(row,col," ")
				setBox(r,col,"P")
				setBox(r-1,col,"X")
			}
		}

	}
	
	function goDown(){
		const row = player[0]
		const col = player[1]
		
		if(row+1 <= map.length-1){
			r = row + 1
		}else{
			r = map.length-1
		}

		if(map[r][col] == " " || map[r][col] == "O"){
			setBox(row,col," ")
			setBox(r,col,"P")
		}
		if(map[r][col] == "X"){
			if(map[r+1][col]==" " || map[r+1][col] == "O"){
				setBox(row,col," ")
				setBox(r,col,"P")
				setBox(r+1,col,"X")
			}
		}
	}
	function goLeft(){
		const row = player[0]
		const col = player[1]

		if(col-1>=0){
			c = col - 1
		}else{
			c = 0
		}

		if(map[row][c] == " " || map[row][c] == "O"){
			setBox(row,col," ")
			setBox(row,c,"P")
		}

		if(map[row][c] == "X"){
			if(map[row][c-1]==" " || map[row][c-1] == "O"){
				setBox(row,col," ")
				setBox(row,c,"P")
				setBox(row,c-1,"X")
			}
		}
	}
	function goRight(){
		const row = player[0]
		const col = player[1]

		if(col+1<=map[0].length){
			c = col + 1
		}else{
			c = map[0].length
		}

		if(map[row][c] == " " || map[row][c] == "O"){
			setBox(row,col," ")
			setBox(row,c,"P")
		}
		if(map[row][c] == "X"){
			if(map[row][c+1]==" " || map[row][c+1] == "O"){
				setBox(row,col," ")
				setBox(row,c,"P")
				setBox(row,c+1,"X")
			}
		}
	}
	function setBox(row,col,val){
		map[row][col] = val
		let BOX =  document.getElementById(`BOX[${row}][${col}]`)
		let className = null
		switch(val){
			case " ":className = "empty";break;
			case "P":className = "player";player=[row,col];break;
			case "X":className = "box";break;
		}
		BOX.className = className
		replaceTargets()
	}

	function replaceTargets(){

		okNum = 0

		for(let i = 0;i<targets.length;i++){
			const r = targets[i][0]
			const c = targets[i][1]

			let BOX =  document.getElementById(`BOX[${r}][${c}]`)
			let className = null
			
			switch(map[r][c]){
				case "P":className = "playerOnTarget";break;
				case "X":className = "boxOnTarget";okNum++;break;
				case " ":className = "target";break;
			}

			if(className != null){BOX.className = className}
		}

		if(okNum == targets.length){
			alert("YOU WIN!")
		}
	}

	function log(msg){
		console.log(msg)
	}

	document.getElementById("ff").onchange = function(){
		f = document.getElementById("ff").files[0];
		var reader = new FileReader();
		reader.readAsText(f,"gbk")
		reader.onload = function(){
			let res = this.result
			res = res.split(/\r?\n/)
			resList = []
			for(let i = 0;i<res.length;i++){
				row = res[i].split("")
				resList.push(row)
			}
			map = resList
			localStorage.setItem("map",JSON.stringify(map))
			loadMap()
		}
	}

	function loadMap(){
		log("---load---")
		if(localStorage.getItem("map")){
			map = JSON.parse(localStorage.getItem("map"))
		}
		if(navigator.userAgent.toLowerCase().match(/window/g).length>0)
		{
			let ctltable = document.getElementById("ctltable")
			ctltable.style.display = "none"
		}
		player = null
		targets = []
		MAP.innerHTML = ""
		const rowNum = map.length
		const colNum = map[0].length

		MAP.style.width = colNum*50 + "px"
		MAP.style.height = rowNum*50 + "px"
		
		for(let i = 0;i<rowNum;i++){
			for(let j = 0;j<colNum;j++){
				switch(map[i][j]){
					case "P":player=[i,j];break;
					case "O":targets.push([i,j]);map[i][j]=" ";break;
					case "o":targets.push([i,j]);map[i][j]="X";break;
				}
			}
		}
		createMap()
	}
	function createMap(){
		log("--create--")
		MAP.innerHTML = ""
		const rowNum = map.length
		const colNum = map[0].length
		
		headleMap = JSON.parse(JSON.stringify(map))

		for(let i = 0;i<rowNum;i++){
			for(let j = 0;j<colNum;j++){
				let block = document.createElement("div")
				switch(headleMap[i][j]){
					case "#":block.classList.add("wall");break;
					case "P":block.classList.add("player");player=[i,j];break;
					case "X":block.classList.add("box");break;
					case " ":block.classList.add("empty");break;
					case "O":block.classList.add("target");break;
					case "o":block.classList.add("boxOnTarget");break;
					case "p":block.classList.add("playerOnTarget");player=[i,j];break;
				}
				block.id = `BOX[${i}][${j}]`
				MAP.append(block)
			}
		}
		replaceTargets()
	}
	window.onload = function(){
		loadMap()
	}
    </script>
    <style>
	*{
		padding:0;
		margin:0;
	}
	html,body{
		height:100%;
		width:100%;
	}
	body{
		background-color: #333;
		display:flex;
		align-items:center;
   		justify-content:center;
   		flex-direction:column
	}
	#MAP{
		display:flex;
		flex-wrap:wrap; 
		width:150px;
		height:150px;
	}
	#control{
		width:200px;
		background-color:red;
		padding:5px;
	}
	#ctltable {
		width:180px;
		height:180px;
		margin:auto;
		border:1px solid black;
	}
	#ctltable td{
	text-align:center;
	height:60px;
	width:60px;
	box-sizing:border-box;
	border:1px solid white;
	}
	.player,.box,.wall,.empty,.target,.playerOnTarget,.boxOnTarget{
		width:50px;
		height:50px;
		display:inline-block;
		box-sizing:border-box;
		background-size: 100% 100%;
	}
	.player{
		background-color:#0CF
	}
	.box{
		background-color:#960;
	}
	.wall{
		background-color:black;
	}
	.target{
		background-color:green;
	}
	.playerOnTarget{
		background-color:#0cf;
	}
	.boxOnTarget{
		background-color:#CF0;
	}
	.empty{
		background-color:#222;
	}
    </style>

</body></html>